<template>
    <div class="certificationCenter">
        <assets-head :title="$t('认证中心')"></assets-head>
        <div class="top px-32 pt-26 pb-42">
            <div class="font-52 textColor flex justify-between">
                <div>{{$t('个人中心')}}</div>
                <!-- <div v-if="nationality"  class="w-60 h-60 rounded-full icon iti-flag" :class="nationality" style="transform: scale(2.1)"></div> -->
            </div>
            <div class="flex">
                <div class="flex items-center mt-32 px-28 py-8 bgDark rounded-full">
                    <img src="../../assets/image/certificationCenter/cftIcon.png" alt="" class="w-64 h-64">
                    <span class="ml-10 font-32 textColor3" @click="show = true">{{$t('查看当前功能')}}</span>
                </div>
            </div>
        </div>
        <div class="contentBox pt-46 tabBackground pb-64">
            <div class="btnBox px-32 flex">
                <div class="textColor3 px-44 h-100 rounded-full bgDark flex items-center" :class="{'activeStyle':active==0}" @click="changeTab(0)">
                    <img v-if="identityverif" src="../../assets/image/certificationCenter/finishIcon.png" alt="" class="w-48 h-48 mr-14"  />
                    <span>{{$t('进阶认证')}}</span>
                </div>
                <div class="textColor3 px-44 h-100 rounded-full bgDark ml-28 flex items-center" :class="{'activeStyle':active==1}" @click="changeTab(1)">
                    <img v-if="advancedverif" src="../../assets/image/certificationCenter/finishIcon.png" alt="" class="w-48 h-48 mr-14" />
                    <span>{{$t('公证认证')}}</span>
                </div>
            </div>
            <div v-show="active==0">
                <div class="flex pl-32 justify-between mt-54">
                    <div class="textColor font-36">{{$t('要求')}}</div>
                    <div class="font-28 flex items-center py-12 px-14 border-radius-left" :class="{'status0':kyc_status==0 || kyc_status==3,'status1':kyc_status==1,'status2':kyc_status==2}">
                        <img :src="require(`../../assets/image/certificationCenter/status${kyc_status}.png`)" class="w-32 h-32" alt="" />
                        <span class="font-28 ml-12">{{fixState(kyc_status)}}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/info.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{$t('个人信息')}}</span>
                    </div>
                    <div class="flex items-center mt-40 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/identity.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{$t('政府发行的身份证')}}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="font-36 textColor mt-82">{{$t('功能与限制')}}</div>
                    <!-- <content-com class="mt-40" :contentObj="coinObj" :state="identityverif"></content-com>
                    <content-com class="mt-40" :contentObj="c2cObj" :state="identityverif"></content-com> -->
                    <content-com class="mt-40" :contentObj="currencyObj" :state="identityverif"></content-com>
                    <div class="flex items-center text-grey font-30 mt-64">
                        <img src="../../assets/image/certificationCenter/suditIcon.png" class="w-36 h-36" alt="" />
                        <span class="ml-24">{{$t('审核时间:3天')}}</span>
                    </div>
                    <div class="px-32 text-red font-20">
                        <p v-show="(kyc_status==3)">{{this.$t('认证驳回：')}}{{turnDownMsg}}</p>
                    </div>          
                    <div class="rounded-lg py-26 text-center mt-16" :class="kyc_status==0 || kyc_status==3?'btnMain text-black':'bgDark text-grey'" @click="$router.push('/authentication')">{{fixBtnState(kyc_status)}}</div>
                </div>
                      
            </div>
            <div v-show="active==1">
                <div class="flex pl-32 justify-between mt-54">
                    <div class="textColor font-36">{{$t('要求')}}</div>
                    <div class="font-28 flex items-center py-12 px-14 border-radius-left" :class="{'status0':advStatus==0 || advStatus ==3,'status1':advStatus==1,'status2':advStatus==2}">
                        <img :src="require(`../../assets/image/certificationCenter/status${advStatus}.png`)" class="w-32 h-32" alt="" />
                        <span class="font-28 ml-12">{{fixState(advStatus)}}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/address.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{$t('家庭地址')}}</span>
                    </div>
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/address.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{$t('工作地址')}}</span>
                    </div>
                    <div class="flex items-center mt-40 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/connect.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{$t('亲属联系方式')}}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="font-36 textColor mt-82">{{$t('功能与限制')}}</div>
                    <!-- <content-com class="mt-40" :contentObj="advCoinObj" :state="advancedverif"></content-com>
                    <content-com class="mt-40" :contentObj="advC2cObj" :state="advancedverif"></content-com> -->
                    <content-com class="mt-40" :contentObj="advCurrencyObj" :state="advancedverif"></content-com>
                    <div class="flex items-center text-grey font-30 mt-64">
                        <img src="../../assets/image/certificationCenter/suditIcon.png" class="w-36 h-36" alt="" />
                        <span class="ml-24">{{$t('公证时间为1-30个工作日')}}</span>
                    </div>
                    <div class="btnMain rounded-lg py-26 text-center mt-16"  :class="advStatus==0 || advStatus==3?'btnMain text-black':'bgDark text-grey'" @click="$router.push('/advancedCtf')">{{fixBtnState(advStatus)}}</div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :close-on-click-overlay="false" @close="onClose">
            <div class="pop-box relative mainBackground pb-46 px-32">
                <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-20 top-46" @click="onClose" />
                <div class="pt-46 textColor font-40 mb-20">{{$t('您当前拥有的功能')}}</div>
                <div class="pb-32 pt-32 border-b-color" v-for="(item,index) in currentList" :key="index">
                    <div class="font-32 text-grey flex items-center">
                        <img :src="require(`../../assets/image/certificationCenter/${item.icon}.png`)" class="w-36 h-36 mr-24" alt="" />
                        <span class="textColor mr-10">{{item.title}}</span>
                        <span>{{item.des}}</span>
                    </div>
                    <div class="text-grey font-30 mt-36 pl-60" v-for="(str,index) in item.arr" :class="{'textColor4':index==1}" :key="index">{{str}}</div>
                </div>
                <div class="btnMain text-black font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{$t('确认')}}</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import contentCom from "./contentCom.vue";
import { Popup } from "vant"
import { _getIdentify } from '@/API/fund.api'
import Axios from '@/API/userCenter'
    export default {
        props: {
        },
        components: {
            [Popup.name]: Popup,
            assetsHead,
            contentCom
        },
        data(){
            return {
                turnDownMsg:'',
                show:false,
                active:0,
                kyc_status: 0, //初级认证0未认证 ，1审核中 ，2审核通过，3审核未通过
                advStatus:0, //高级认证
                identityverif:false,//初级认证
                advancedverif:false,//高级认证
                nationality:'',
                coinObj:{
                    title: this.$t('法币限额'),
                    list:[
                        {
                            left: this.$t('充值'),
                            right: this.$t('$50K 每日')
                        },
                        {
                            left: this.$t('提现'),
                            right: this.$t('$50K 每日')
                        }
                    ]
                },
                c2cObj: {
                    title: this.$t('C2C交易限额'),
                    list: [
                        {
                            left: 'C2C',
                            right: this.$t('无限额')
                        },
                    ]
                },
                currencyObj: {
                    title: this.$t('加密货币限额'),
                    list: [
                        {
                            left: this.$t('充值'),
                            right: this.$t('无限额')
                        },
                        {
                            left: this.$t('提现'),
                            right: this.$t('50K 每日')
                        }
                    ]
                },
                advCoinObj: {
                    title: this.$t('法币限额'),
                    list: [
                        {
                            left: this.$t('充值'),
                            right: this.$t('$100K 每日')
                        },
                        {
                            left: this.$t('提现'),
                            right: this.$t('$100K 每日')
                        }
                    ]
                },
                advC2cObj: {
                    title: this.$t('C2C交易限额'),
                    list: [
                        {
                            left: 'C2C',
                            right: this.$t('无限额')
                        },
                    ]
                },
                advCurrencyObj: {
                    title: this.$t('加密货币限额'),
                    list: [
                        {
                            left: this.$t('充值'),
                            right: this.$t('无限额')
                        },
                        {
                            left: this.$t('提现'),
                            right: this.$t('10M 每日')
                        }
                    ]
                },
                currentList:[],
                ownList:[
                    {
                        icon:'1',
                        title:'$50K',
                        des: this.$t('每日'),
                        arr: [this.$t('法币充值 & 提现限额')]
                    },
                    {
                        icon: '2',
                        title: this.$t('无限额'),
                        des: '',
                        arr: [this.$t('数字货币充值'), this.$t('提高限额')]
                    },
                    {
                        icon: '3',
                        title: '8M USDT',
                        des: this.$t('每日'),
                        arr: [this.$t('数字货币提现限额')]
                    },
                    {
                        icon: '4',
                        title: this.$t('无限额'),
                        des: '',
                        arr: [this.$t('C2C交易限额')]
                    },
                    {
                        icon: '5',
                        title: 'OTC',
                        des: '',
                        arr: [this.$t('其他功能')]
                    }
                ],
                advOwnList: [
                    {
                        icon: '1',
                        title: '$100K',
                        des: this.$t('每日'),
                        arr: [this.$t('法币充值 & 提现限额')]
                    },
                    {
                        icon: '2',
                        title: this.$t('无限额'),
                        des: '',
                        arr: [this.$t('数字货币充值'), this.$t('提高限额')]
                    },
                    {
                        icon: '3',
                        title: '10M USDT',
                        des: this.$t('每日'),
                        arr: [this.$t('数字货币提现限额')]
                    },
                    {
                        icon: '4',
                        title: this.$t('无限额'),
                        des: '',
                        arr: [this.$t('C2C交易限额')]
                    },
                    {
                        icon: '5',
                        title: 'OTC',
                        des: '',
                        arr: [this.$t('其他功能')]
                    }
                ]
            }
        },
        created(){
            this.currentList = this.ownList
            this.getLocaluserAction();
            this.getIdentify();
        },
        methods: {
            changeTab(index){
                this.active = index
                if(index==0){
                    this.currentList = this.ownList
                }else{
                    this.currentList = this.advOwnList
                }
            },
            onClose() {
                this.show =false
            },
            getLocaluserAction() {
                Axios.localuserAction().then(res => {
                    this.identityverif = res.data.identityverif
                    this.advancedverif = res.data.advancedverif
                    this.nationality = res.data.nationality
                    this.kyc_status = res.data.kyc_status
                    this.advStatus = res.data.kyc_high_level_status
                })
            },
            getIdentify(){
                _getIdentify().then(data => {   
                    this.turnDownMsg = data.msg;
                })
            },
            fixState(kyc_status){
                let str = ''
                if(kyc_status == 0){
                    str = this.$t('未认证')
                } else if (kyc_status == 1){
                    str = this.$t('审核中')
                } else if (kyc_status == 2) {
                    str = this.$t('已认证')
                } else {
                    str = this.$t('未认证')
                }
                return str;
            },
            fixBtnState(kyc_status){
                let str = ''
                if (kyc_status == 0) {
                    str = this.$t('开始认证')
                } else if (kyc_status == 1) {
                    str = this.$t('审核详情')
                } else if (kyc_status == 2) {
                    str = this.$t('认证详情')
                } else {
                    str = this.$t('开始认证')
                }
                return str;
            }
        }
    }
</script>

<style lang="scss" scoped>
.certificationCenter{
    width: 100%;
    box-sizing: border-box;
}
.contentBox{
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.activeStyle{
    background: $btn_main;
    color: #000;
}
.status0{
    background: #FFEAEC;
    color: #E35461;
}
.status1 {
    background: #FFEAEC;
    color: #DBAE18;
}
.status2 {
    background: #E6F6F0;
    color: #03A66D;
}
.status3 {
    background: #FFEAEC;
    color: #E35461;
}
.border-radius-left{
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
.van-popup.van-popup--bottom {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
</style>